﻿
@{
    ViewBag.Title = "User";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}



@section head{
    <style type="text/css">
        #outermost_container { /*页面最外层容器样式*/
            width: 100%;
            height: 100%;
        }

        /*左右两个容器的样式*/
        #left_container {
            width: 50%;
            height: 100%;
            float: left;
        }

        #right_container {
            width: 50%;
            height: 100%;
            float: left;
        }

        /*上下两个容器的样式*/
        #top_container {
            width: 100%;
            height: 30%;
        }

        #bottom_container {
            width: 100%;
            height: 30%;
        }
    </style>
}

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户列表</legend>
</fieldset>

<div id="outermost_container">

    <div id="top_container">

        <!--查询表单工具栏-->
        <form class="layui-form">
            <div class="layui-form-item">
                <!-- <label class="layui-form-label">搜索</label> -->
                <div class="layui-input-block">

                    <label class="layui-form-label">用户名</label>
                    <input type="text" id="SearchText" name="Title1" required lay-verify="required" onkeypress="getKey()" placeholder="请输入用户名" class="layui-input" style="width:300px;float:left;">

                    <label class="layui-form-label">用户手机号</label>
                    <input type="text" id="SearchText2" name="Title2" required lay-verify="required" onkeypress="getKey()" placeholder="请输入用户手机号" class="layui-input" style="width:300px;float:left;">
                    <input type="text" value="" style="display:none" />


                    <input type="hidden" id="idl" value="内容部分" />
                    <button type="button" class="layui-btn layui-btn-normal" style="margin-left:1%" onclick="SearchFunc()"><i class="layui-icon">&#xe615;</i>搜 索</button>

                </div>
            </div>
        </form>

        <!--添加用户栏-->
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add" style="margin-left:0.5%" id="BtnAddUser"> 添加 </button>

    </div>


    <div id="bottom_container">
        <table id="UserTable" lay-filter="UserList"></table>
    </div>

</div>

<!--添加用户信息页-->
<div id="show_outermost_container" style="display: none; ">

    <div style="margin-top:1%;">

        <form id="UserMsgForm" lay-filter="UserMsgList" class="layui-form">

            <div class="layui-form-item">
                <div style="float:left; margin-left: 5%; width: 45%;">
                    <label class="layui-form-label">用户名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="user_name" lay-verify="required"  placeholder="请输入用户名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div style="float:left; margin-right: 5%; width: 45%;">
                    <label class="layui-form-label">公司名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="user_company" placeholder="请输入公司名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div style="float:left; margin-left: 5%; width: 45%;">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-block">
                        <input type="number" name="user_phone" required lay-verify="required|phone" placeholder="联系电话" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div style="float:left; margin-right: 5%; width: 45%;">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="email" name="user_email"  placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-block">
                    <input type="text" name="user_address" placeholder="详细地址" autocomplete="off" class="layui-input">

                </div>

            </div>

            @*<div class="layui-form-item">
            <div style="float:left; margin-left: 5%; width: 45%;">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="text" name="password" required lay-verify="required|password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux" style="display: none;">辅助文字</div>
            </div>

            <div style="float:left; margin-right: 5%; width: 45%;">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="text" name="password" required lay-verify="required|password" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux" style="display: none;">辅助文字</div>
            </div>
        </div>*@

            <div class="layui-form-item">

                <div style="float:left; margin-left: 5%; width: 45%;">
                    <label class="layui-form-label">所在地区</label>
                    <div class="layui-input-block">
                        <select name="user_type" lay-verify="required">
                            <option value="0" >普通用户</option>
                            <option value="1" >系统用户</option>
                        </select>
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <label class="layui-form-label"></label>
                        <button type="button" class="layui-btn" id="BtnSave">保存</button>
                    </div>
                </div>
            </div>

            <button type="submit" id="formAddsubmit" class="layui-btn" lay-submit lay-filter="formAddVerify" style="display:none;">隐藏提交按钮</button>

        </form>

    </div>

</div>


<script type="text/javascript">

    var table;
    layui.use(['form', 'table', 'upload', 'layer'], function () {
        table = layui.table;//AAAA
        var tab = parent.tab;
        var form = layui.form;
        var layer = layui.layer;
        var IsValidate = 0;
        var index;
        //第一个实例

        //拦截form提交消息
        form.on('submit(formAddVerify)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            IsValidate = 1;
            return false;
        });


        table.render({
            elem: '#UserTable'
            , method: 'post'
            //, height: 315
            , url: '/DataExchange/Table_User/' //数据接口
            , page: true //开启分页
            , where: { SortName: "user_id", Order: "ASC", Condition: " and IsDelete=0" }
            , limits: [10, 50, 100]

            , cols: [[ //表头
                { field: 'user_name', title: '用户名称', width: 100, fixed: 'left' }
                , { field: 'user_phone', title: '用户手机号', width: 150 }
                , {
                    field: 'user_type', title: '用户类型', width: 200,
                    templet: function (d) {
                        if (d.user_type == "1") {
                            return "管理员";
                        }
                        else if (d.user_type == "0") {
                            return "一般用户";
                        }
                    }
                }
                , {
                    field: "operation", title: "操作", width: 200,
                    templet: function (d) {
                        return '<a class="layui-btn layui-btn-xs" lay-event="Edit">编辑</a><a class="layui-btn layui-btn-xs" lay-event="TableDel">删除</a>';
                    }
                }
            ]]
        });

        table.on("tool(UserList)", function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent == 'Edit') {

                var options = {
                    id: new Date().getTime(),
                    title: '设备编辑' + data.DeviceId,
                    icon: 'fa-file',
                    url: '/BC/Device/DeviceEditView?DeviceId=' + data.DeviceId
                };
                tab.tabAdd(options);

            }

            if (layEvent == 'TableDel') {
                layer.confirm('<span class="layui-icon">&#x1006;</span>' + '是否真的要删除该用户？', {
                    btn: ['删除', '取消'] //可以无限个按钮
                    , btn1: function (index, layero) {
                        //按钮【删除】的回调
                        //SSEditDelete
                        $.ajax({
                            type: "POST",
                            url: "/DataExchange/Table_UserDel/",
                            async: false,
                            data: { "user_id": data.user_id },
                            success: function (msg) {
                                if (msg.result == "OK") {
                                    table.reload("UserTable", {
                                        //where: { SortName: "SSlistId", Order: "Desc", Condition: " and 1=1" }
                                    });
                                    //tab.close(tab.getId());
                                } else {
                                    alert("删除失败");
                                }
                            }
                        });
                        layer.close(index, layero);
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮三】的回调
                        //alert("2");
                    }
                });
            }

        });

        //新增用户保存
        $("#BtnSave").on("click", function () {
            $("#formAddsubmit").click();
            if (IsValidate == 1) {
                IsValidate = 0;
            } else {
                return;
            }
            var obj = $("#UserMsgForm").serializeArray();
            var data = {};
            $.each(obj, function (i, v) {
                data[v.name] = v.value;
            });
            $.ajax({
                type: "POST",
                url: "/DataExchange/UserAdd",
                async: false,
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data),
                success: function (msg) {
                    if (msg.result == "OK") {
                        layer.msg('新增成功', { icon: 6, time: 1000 });
                        layer.close(index);
                        table.reload("UserTable");
                    } else {
                        alert(msg.result);
                    }
                }
            });
        });

        

        $("#BtnAddUser").on("click", function () {
            index = layer.open({
                type: 1,
                area: ['800px', '700px'],
                content: $("#show_outermost_container") //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
        });



    });

    function getKey() {
        if (event.keyCode == 13) {

            SearchFunc();
        }
    }


    function SearchFunc() {
        var text = $("#SearchText").val();
        var text2 = $("#SearchText2").val();
        if (text == "" && text2 == "") {
            table.reload("UserTable", {
                where: { SortName: "user_id", Order: "ASC", Condition: " and  IsDelete=0" }
                , page: {
                    curr: 1
                }
            });
        }
        else {
            if (text != "" && text2 != "") {
                table.reload("UserTable", {
                    where: {
                        SortName: "user_id", Order: "ASC", Condition: " and IsDelete=0 and User_Name like '%" + text + "%' and User_Phone like '%" + text2 + "%'"
                    }
                    , page: {
                        curr: 1
                    }
                });
            }
            else if (text != "") {
                table.reload("UserTable", {
                    where: {
                        SortName: "user_id", Order: "ASC", Condition: " and IsDelete=0 and User_Name like '%" + text + "%'"
                    }
                    , page: {
                        curr: 1
                    }
                });
            }
            else {
                table.reload("UserTable", {
                    where: {
                        SortName: "user_id", Order: "ASC", Condition: " and IsDelete=0 and User_Phone like '%" + text2 + "%'"
                    }
                    , page: {
                        curr: 1
                    }
                });
            }
        }
    }

    

    //function AddUser() {
    //    var show_view = document.getElementById("show_outermost_container");
    //    var content = show_view.innerHTML;
    //    layui.use('layer', function () {
    //        var layer = layui.layer;
    //        layer.open({
    //            id: '1',
    //            title: '添加用户',//标题
    //            type: 1,//基本层类型.layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    //            area: ['60%', '70%'],//宽高
    //            //btn: ['确定', '重置'],　　　　//按钮
    //            content: content, //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
    //            closeBtn: 2,//layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
    //        });
    //        //Ajax获取
    //        $.post('url', {}, function (str) {
    //            layer.open({
    //                type: 1,
    //                content: str //注意，如果str是object，那么需要字符拼接。
    //            });
    //        });
    //    });
    //}

</script>

